<template>
  <div class="rank-wrapper" ref="rank">
    <scroll class="scroll" :data="rankList" ref="scroll">
      <ul class="rank-list">
        <li
          v-for="item in rankList"
          :key="item.topId"
          @click="handleBtnClick(item)"
          >
          <div class="left">
            <!-- <img :src="item.frontPicUrl" /> -->
            <img v-lazy="item.frontPicUrl" />
          </div>
          <div class="right">
            <p
              v-for="innerItem in item.song"
              :key="innerItem.rank"
              >
              <span>{{innerItem.rank}}.</span>
              {{innerItem.title}}
              - {{innerItem.singerName}}
            </p>
          </div>
        </li>
      </ul>
    </scroll>
    <div class="loading-wrap">
      <loading v-show="!list.length"></loading>
    </div>
    <slide>
      <router-view></router-view>
    </slide>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { getRank } from 'api'
import { playlistMixin } from 'common/js/mixin'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import Slide from 'base/slide/slide'

export default {
  name: 'rank',
  mixins: [ playlistMixin ],
  components: {
    Scroll,
    Loading,
    Slide
  },
  data () {
    return {
      list: []
    }
  },
  created () {
    this._getRank()
  },
  computed: {
    rankList () {
      const ret = []
      this.list.forEach((item) => {
        const { toplist } = item
        ret.push(...toplist)
      })
      return ret
    }
  },
  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length ? '60px' : ''
      this.$refs.rank.style.bottom = bottom
      this.$refs.scroll.refresh()
    },
    handleBtnClick (item) {
      this.$router.push({
        path: `/rank/${item.topId}`
      })
      this.setTopList(item)
    },
    _getRank () {
      getRank().then((data) => {
        // console.log(data)
        this.list = data.group
      })
    },
    ...mapMutations({
      setTopList: 'SET_TOP_LIST'
    })
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  @import '~common/stylus/mixin.styl'
  .rank-wrapper {
    position: absolute
    top: 76px
    right: 0
    bottom: 0
    left: 0
    .rank-list {
      padding: 20px;
      li {
        overflow: hidden
        display: flex
        width: 100%
        background: $color-highlight-background
        margin-bottom: 20px
        &:last-child {
          margin-bottom: 0
        }
        .left {
          overflow: hidden
          width: 100px
          height: 100px
          background: #eee
          img {
            width: 100%
          }
        }
        .right {
          flex: 1
          padding: 20px
          display: flex
          flex-direction: column
          overflow: hidden
          p {
            flex: 1
            line-height: 20px
            font-size: $font-size-small-s
            color: $color-text-l
            width: 100%
            no-wrap()
            span {
              margin-right: 8px
            }
          }
        }
      }
    }
    .loading-wrap {
      display: flex
      justify-content: center
      flex-direction: column
      height: 100%
    }
    .loading {
      width: 100%
      margin-top: 0
    }
  }
  .scroll {
    overflow: hidden
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
  }
</style>
